<template>
	<div class="all">
		<div class="left">
			<left></left>
		</div>
		<div class="right">
			<div class="top">
				<top></top>
			</div>
			<div class="content">
				<div class="flex">
					<el-button type="warning" @click="log = true">新建代理商</el-button>
				</div>
				<div class="table">
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column label="ID">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="代理商名称">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.agentName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="手机号">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.phone }}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建时间">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" @click="go(scope.row.id)">查看关联套餐</el-button>
								<el-button type="text" @click="change(scope.row)">修改信息</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="page"
					 @current-change="fanye" :page-size="page_size" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<el-dialog title="添加供应商" :visible.sync="log" :close-on-click-modal="false" width="600px">
			<div class="flex">
				<div class="f1"><span class="red">*</span>代理商名称:</div>
				<div class="f2">
					<el-input v-model="dailishang.username" style="width: 400px;" placeholder="代理商名称"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1"><span class="red">*</span>手机号:</div>
				<div class="f2">
					<el-input v-model="dailishang.cell_phone" style="width: 400px;" placeholder="手机号"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1"><span class="red">*</span>密码:</div>
				<div class="f2">
					<el-input v-model="dailishang.password" style="width: 400px;" placeholder="密码"></el-input>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取 消</el-button>
				<el-button type="primary" @click="tianjia">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="修改代理商" :visible.sync="log2" :close-on-click-modal="false" width="600px">
			<div class="flex">
				<div class="f1">代理商名称:</div>
				<div class="f2">
					<el-input v-model="changecon.username" disabled style="width: 400px;" placeholder="代理商名称"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">手机号:</div>
				<div class="f2">
					<el-input v-model="changecon.cell_phone" style="width: 400px;" placeholder="手机号"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">密码:</div>
				<div class="f2">
					<el-input v-model="changecon.password" style="width: 400px;" placeholder="密码"></el-input>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log2 = false">取 消</el-button>
				<el-button type="primary" @click="xiugai">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import bus from '@/assets/bus.js'
	export default {
		name: 'index',
		components: {
			left,
			top
		},
		data() {
			return {
				dailishang: {
					agent_name: "",
					cell_phone: "",
					password: "",
					username: ""
				},
				changecon: {
					id: "",
					agent_name: "",
					cell_phone: "",
					password: "",
					username: ""
				},
				log: false,
				log2: false,
				page: 1,
				page_size: 20,
				total: 0,
				loading: false,
				tableData: []
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {
			this.getlist()
		},
		mounted() {

		},
		methods: {
			go: function(id) {
				this.$router.push({
					path: "/index/index_taocan",
					query: {
						id: id
					}
				})
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.getlist()
			},
			//获取列表
			getlist: function() {
				this.axios.get(this.url + `/work/agent/list?pageNo=${this.page}&pageSize=${this.page_size}`)
					.then(response => {
						if (response.data.success == true) {
							this.tableData = response.data.result.records
							this.total = response.data.result.total
						} else {
							if (response.data.code == 401) {
								this.$router.push({
									path: '/login'
								})
							} else {
								this.$message.error(response.data.message);
							}
						}
					})
					.catch(response => {
						console.log(response)
					});
			},
			//添加供应商
			tianjia: function() {
				if(this.dailishang.cell_phone == '' || this.dailishang.username == '' || this.dailishang.password == ''){
					this.$message.error('填写必填信息');
					return false
				}
				this.axios.post(this.url +
						`/work/agent/add?cell_phone=${this.dailishang.cell_phone}&agent_name=${this.dailishang.username}&password=${this.dailishang.password}&username=${this.dailishang.username}`
					)
					.then(response => {
						if (response.data.success == true) {
							this.$message.success("添加代理商成功");
							this.dailishang = {
								agent_name: "",
								cell_phone: "",
								password: "",
								username: ""
							}
							this.getlist()
							this.log = false
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			change: function(item) {
				this.changecon.agent_name = item.agentName
				this.changecon.cell_phone = item.phone
				this.changecon.username = item.username
				this.log2 = true
			},
			//修改
			xiugai: function() {
				if(this.changecon.cell_phone == ''){
					this.$message.error('填写必填信息');
					return false
				}
				this.axios.post(this.url +
						`/work/agent/edit?phone=${this.changecon.cell_phone}&username=${this.changecon.username}`
					)
					.then(response => {
						if (response.data.success == true) {
							//查看是否修改密码
							if (this.changecon.password != '') {
								this.xiugaimima()
							} else {
								this.$message.success("修改代理商成功");
								this.changecon = {
									id: "",
									agent_name: "",
									cell_phone: "",
									password: "",
									username: ""
								}
								this.getlist()
								this.log2 = false
							}
						} else {
							if (response.data.code == 401) {
								this.$router.push({
									path: '/login'
								})
							} else {
								this.$message.error(response.data.message);
							}
						}
					})
			},
			//密码单独修改
			xiugaimima: function() {
				this.axios.post(this.url +
						`/work/agent/editPassword?password=${this.changecon.password}&username=${this.changecon.username}`
					)
					.then(response => {
						if (response.data.success == true) {
							this.$message.success("修改代理商成功");
							this.changecon = {
								id: "",
								agent_name: "",
								cell_phone: "",
								password: "",
								username: ""
							}
							this.getlist()
							this.log2 = false
						} else {
							if (response.data.code == 401) {
								this.$router.push({
									path: '/login'
								})
							} else {
								this.$message.error(response.data.message);
							}
						}
					})
			}
		},

	}
</script>

<style scoped lang="less">
	.all {
		display: flex;
		height: 100vh;

		.left {
			width: 200px;
			height: 100%;
			background: #414652;
			box-shadow: 0 2px 10px #2D3038;
		}

		.right {
			width: calc(100% - 180px);
			height: 100%;
			overflow: auto;

			.content {
				padding: 20px;

				.table {
					margin-top: 20px;
				}
			}
		}
	}
</style>
